<template>
	<view>
		<view class="album-head"><swiper-tab-bar :tabBars="tabBars" :tabIndex="tabIndex" @changTab="changTab"></swiper-tab-bar></view>
		<view>
			<swiper @change="changSelected" :current="tabIndex" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
				<!--公开 -->
				<swiper-item>
					<view class="album-body">
						<view class="album-tip">
							<view class="tips">最多上传{{ albumInfo[0].total }}张照片，单张文件不超过{{ maxSize }}M</view>
						</view>
						<upload-images
							@changeImg="publicImgChange"
							:sourceImgs="albumInfo[0].imgs"
							:total="albumInfo[0].total"
							:sourceTypeIndex="2"
							:sizeTypeIndex="2"
						></upload-images>
					</view>
				</swiper-item>
				<!-- 私有 -->
				<swiper-item>
					<view class="album-body">
						<view class="album-tip">
							<view class="tips">最多上传{{ albumInfo[1].total }}张照片，单张文件不超过{{ maxSize }}M</view>
						</view>
						<upload-images
							@changeImg="privateImgChange"
							:sourceImgs="albumInfo[1].imgs"
							:total="albumInfo[1].total"
							:sourceTypeIndex="2"
							:sizeTypeIndex="2"
						></upload-images>
					</view>
				</swiper-item>
				<!-- 焚毁 -->
				<swiper-item>
					<view class="album-body">
						<view class="album-tip">
							<view class="tips">最多上传{{ albumInfo[2].total }}张照片，单张文件不超过{{ maxSize }}M</view>
						</view>
						<upload-images
							@changeImg="destroyImgChange"
							:sourceImgs="albumInfo[2].imgs"
							:total="albumInfo[2].total"
							:sourceTypeIndex="2"
							:sizeTypeIndex="2"
						></upload-images>
					</view>
				</swiper-item>
			</swiper>
			<button plain="true" @tap="uploadAlbum" class="flexButton">确认上传</button>
		</view>
		<uni-popup :maskClick="false" ref="loding" type="center">
			<view class="lodingMessing">相册更新中...</view>
		</uni-popup>
	</view>
</template>

<script>
import swiperTabBar from '../../components/common/swiper-tab-bar.vue';
import uploadImages from '../../components/common/upload-images.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		swiperTabBar,
		uploadImages
	},
	data() {
		return {
			tabIndex: 0,
			tabBars: [{ name: '公开', id: 'gongkai' }, { name: '私密', id: 'simi' }, { name: '阅后即焚', id: 'fenhui' }],
			swiperHeight: 0,
			maxSize: 4,
			task:false,
			albumInfo: [
				{
					total: 9,
					imgs: []
				},
				{
					total: 9,
					imgs: []
				},
				{
					total: 9,
					imgs: []
				}
			]
		};
	},
	methods: {
		changTab(index) {
			this.tabIndex = index;
		},
		changSelected(e) {
			this.tabIndex = e.detail.current;
		},
		publicImgChange(imgs) {
			this.albumInfo[0].imgs = imgs;
		},
		privateImgChange(imgs) {
			this.albumInfo[1].imgs = imgs;
		},
		destroyImgChange(imgs) {
			this.albumInfo[2].imgs = imgs;
		},
		loadAlbum(type) {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.mineAlbum,
				header: constant.authHead(),
				data: {
					type: type
				},
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.albumInfo[type - 1].imgs = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		uploadAlbum() {
			this.$refs.loding.open();
			let imgData = this.albumInfo[this.tabIndex].imgs;
			let imgsData = [];
			imgData
				.filter(url => !url.startsWith('https://oss.huazhu91.com'))
				.forEach((imgurl, index) => {
					imgsData.push({
						name: `file${index}`,
						uri: imgurl
					});
				});

			let user = uni.getStorageSync(constant.user);
			uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.uploadFiles,
				files: imgsData,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`,
					'X-FILE-PATH': `${user.id}/imgs`
				},
				success: res => {
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						let readyData =  this.albumInfo[this.tabIndex].imgs.filter(url => url.startsWith('https://oss.huazhu91.com'));
						readyData.push(...data.data);
						this.albumInfo[this.tabIndex].imgs = readyData;
						this.submitAlbum();
					} else {
						showToast(data.msg);
						this.$refs.loding.close();
					}
				}
			});
		},
		submitAlbum() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.mineAlbum,
				header: constant.authHead(),
				data: { type: (this.tabIndex + 1), urls: this.albumInfo[this.tabIndex].imgs,task:this.task },
				method: 'PUT',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						showToast('更新相册成功');
						this.$refs.loding.close();
					} else {
						this.$refs.loding.close();
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
	},
	onLoad(options) {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 65;
				this.loadAlbum(1);
				this.loadAlbum(2);
				this.loadAlbum(3);
			}
		});
		this.task=options.task||false;
	}
};
</script>

<style lang="less" scoped>
.album-head {
	padding: 20rpx 0;
}
.album-body {
	.album-tip {
		padding-top: 20rpx;
		background: #f5f7fa;

		.tips {
			padding-top: 20rpx;
			padding-left: 45rpx;
			background-color: #ffffff;
			font-size: 28rpx;
			color: #999999;
		}
	}
}
.flexButton {
	position: fixed;
	bottom: 20rpx;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #fcb5b9, #ff7ea5) !important;
	color: #ffffff;
	border: 0 !important;
	border-radius: 40rpx !important;
}
.lodingMessing{
	font-size: 46rpx;
	color: #FFFFFF;
	text-align: center;
}
</style>
